<style lang="less" scoped>
@import "./hot.less";
</style>
<template>
  <div>
      <Row>
            <Col span="24">
                <Card>
                  <p slot="title" style="height: 32px">
                            <Button type="primary" @click="alertAdd" icon="plus-round">新增</Button>
                    </p>
                    <div>
                      
                            <Table :columns="columnsList" :data="tableData" border disabled-hover></Table>
                    </div>
                    <div class="margin-top-15" style="text-align: center">
                            <Page :total="tableShow.count" :current="tableShow.page" :page-size="tableShow.size" @on-change="changePage" @on-page-size-change="changeSize" show-elevator show-sizer show-total></Page>
                    </div>
                </Card>
            </Col>
        </Row>
        <Modal v-model="modal.show" :style="{top:'30px'}">
          <Form  :model="formItem" :label-width="140">
              <FormItem label="城市" prop="city">
                <Select v-model="formItem.city" filterable remote :remote-method="searchCity" :loading="loadingHouse">
                    <Option v-for="(option, index) in citys" :value="option.id" :key="index">{{option.name}}</Option>
                </Select>
                </FormItem>
              <FormItem label="排序值" prop="sort">
                  <Input v-model="formItem.sort" placeholder="序号"></Input>
              </FormItem>
              
          </Form>
          <div slot="footer">
                <Button type="text" @click="cancel" style="margin-right: 8px">取消</Button>
                <Button type="primary" @click="submit" :loading="modal.loading">确定</Button>
            </div>
        </Modal>
  </div>
</template>
<script>
const resourse = "hot";
import axios from "axios";
export default {
  data() {
    return {
      columnsList: [
        {
          title: "序号",
          type: "index",
          align: "center"
        },
        {
          title: "城市名称",
          key: "name",
          align: "center"
        },
        {
          title: "排序",
          key: "sort",
          align: "center"
        },
        {
          title: "操作",
          align: "center",
          render: (h, params) => {
            return h(
              "Button",
              {
                props: {
                  type: "error"
                },
                style: {
                  margin: "0 5px"
                },
                on: {
                  click: () => {
                    axios.delete("hot/" + params.row.id).then(response => {
                      let res = response.data;
                      if (res.code === 200) {
                        this.getList();
                      } else {
                        if (res.code === 403) {
                          this.$store.commit("logout", this);
                          this.$router.push({
                            name: "login"
                          });
                        } else {
                          this.$Message.error(res.msg);
                        }
                      }
                    });
                  }
                }
              },
              "删除"
            );
          }
        }
      ],
      tableData: [],
      tableShow: {
        count: 0,
        page: 1,
        size: 10
      },
      formItem: {
        city: "",
        sort: 0
      },
      modal: {
        show: false,
        loading: false
      },
      loadingHouse: false,
      citys: []
    };
  },
  created() {
    // this.init();
    this.getList();
  },
  methods: {
    cancel() {
      this.modal.loading = false;
      this.modal.show = false;
    },
    changePage(page) {
      this.tableShow.page = page;
      this.getList();
    },
    changeSize(size) {
      this.tableShow.size = size;
      this.getList();
    },
    getList() {
      axios
        .get(resourse, {
          params: { page: this.tableShow.page, size: this.tableShow.size }
        })
        .then(response => {
          let res = response.data;
          if (res.code === 200) {
            this.tableData = res.data.list;
            this.tableShow.count = res.data.count;
          } else {
            if (res.code === 403) {
              this.$store.commit("logout", this);
              this.$router.push({
                name: "login"
              });
            } else {
              this.$Message.error(res.msg);
            }
          }
        });
    },
    alertAdd() {
      this.modal.show = true;
    },
    searchCity(query) {
      if (query !== "") {
        this.loadingHouse = true;
        axios.get("city/search", { params: { key: query } }).then(response => {
          let res = response.data;
          this.loadingHouse = false;
          if (res.code === 200) {
            this.citys = res.data.list;
          } else {
            if (res.code === 403) {
            } else {
              this.$Message.error(res.msg);
            }
          }
        });
      } else {
        this.citys = [];
      }
    },
    submit() {
      this.modal.loading = true;
      axios
        .post("hot", { code: this.formItem.city, sort: this.formItem.sort })
        .then(response => {
          this.modal.loading = false;
          let res = response.data;
          if (res.code === 200) {
            this.modal.show = false;
            this.getList();
          } else {
            if (res.code === 403) {
            } else {
              this.$Message.error(res.msg);
            }
          }
        });
    }
  }
};
</script>

